<template>
<el-dialog :destroy-on-close="true" :before-close="cancel" :lock-scroll="false" title="关联设备" :visible.sync="visible" class="associate-equipment">
  <div style="margin-bottom: 20px">
    <div class="exportBtn">
      <el-button icon="el-icon-upload2" v-if="permission.includes('sys:projectProduct:import')" type="primary"
                 class="ele-btn-icon" size="small" @click="importAll">
        批量导入
      </el-button>
    </div>
  <el-form :rules="rules" :model="form" ref="form">
    <el-form-item label="设备："  prop="product_ids">
      <el-select
        v-model="form.product_ids"
        remote
        multiple
        filterable
        blur
        :remote-method="querySearchProduct"
        clearable
        value-key="id"
        placeholder="请输入出厂编号"
        :loading="productLoading">
        <el-option
          blur
          v-for="item in productList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          <template #default>
            出厂编号: <span style="margin-right: 14px;">{{ item.name ? item.name : '无' }}</span>
          </template>
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>

  </div>
  <div slot="footer">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="submit('form')" :loading="loading">提交</el-button>
  </div>
  <importProduct :visible.sync="showImport" :id="id" @done="completeImport" type="product"></importProduct>
</el-dialog>
</template>

<script>
import {mapGetters} from "vuex";
import importProduct from "@/views/project/projectList/info/components/equipment/componets/importProduct.vue";
export default {
  name: "AssociateEquipment",
  components:{importProduct},
  data(){
    return{
      rules: {
        product_ids: [
          {required: true, message: '请搜索产品', trigger: 'change'},
        ],
      },
      id:null,
      form:{
        product_ids:[]
      },
      productLoading:false,
      showImport:false,
      productList:[],
      visible:false,
      loading: false,
      tableData:[{}],
      selectedList:[],
    }
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  mounted() {
    this.querySearchProduct('')
  },
  methods:{
    completeImport() {
      this.showImport = false
      this.visible=false
    },
    importAll() {
      // this.visible=false
      this.showImport = true
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http.post(`/projects/${this.id}/products`, this.form).then(res => {
            this.loading = false
            if (res.data.success) {
              this.$message.success(res.data.msg);
              this.$emit("reload")
              this.cancel()
            } else {
              this.loading = false
              this.$message.error(res.data.msg);
            }
          })
        }
      });
    },
    //远程搜索产品
    querySearchProduct(query) {
      this.productLoading = true;
      this.$http.get(`products?limit=10&name=${query}&filter_project=1`,).then((res) => {
        this.productLoading = false;
        this.productList = res.data.data
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    onActivate(id) {
      this.id=id
      this.visible = true
    },
    cancel() {
      this.$refs.form.resetFields()
      this.visible = false
    },
  }
}
</script>

<style scoped lang="scss">
    .el-select{
      width: 100%;
    }
</style>
